<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>FloatButton8 悬浮按钮</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">浮动按钮组</a-divider><!-- =============================================================== -->
	<p class="desc">按钮组合使用时，推荐使用 FloatButton.Group，并通过设置 shape 属性改变悬浮按钮组的形状。</p>
	<p class="desc">悬浮按钮组的 shape 会覆盖内部 FloatButton 的 shape 属性。</p>
	<a-float-button-group shape="circle" :style="{ right: '24px' }">
		<a-float-button @click="handleClick(1)">
			<template #icon>
				<question-circle-outlined></question-circle-outlined>
			</template>
		</a-float-button>
		<a-float-button @click="handleClick(2)"></a-float-button>
		<a-back-top @click="backClick" :visibility-height="0"></a-back-top>
	</a-float-button-group>
	
	<a-float-button-group shape="square" :style="{ right: '94px' }">
		<a-float-button @click="handleClick(3)">
			<template #icon>
				<question-circle-outlined></question-circle-outlined>
			</template>
		</a-float-button>
		<a-float-button @click="handleClick(4)"></a-float-button>
		<a-float-button @click="handleClick(5)">
			<template #icon>
				<sync-outlined></sync-outlined>
			</template>
		</a-float-button>
		<a-back-top @click="backClick" :visibility-height="0"></a-back-top>
	</a-float-button-group>
	
	
	
</div>
<div class="h1000"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		
	}
},
methods:{
	handleClick(val){
		console.log('click', val);
	},
	backClick(){
		console.log('回到顶部了');
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
